// css初始化
*{
  margin: 0;
  padding : 0;
  box-sizing: boder-box;
}
li{
  list-style: none;
}
/* 声明字体*/
@font-face {
  font-family: electronicFont;
  src: url(../font/DS-DIGIT.TTF);
}

body{
  background: url('../image/bg.jpg') no-repeat top center;
  line-height: 1.15;
}
header{
  position: relative;
  // 高度为100px
  height: 1.25rem;
  background: url('../image/head_bg.png') no-repeat;
  // 缩放比例为 100%
  background-size: 100% 100%;
}

// h1 标题部分 白色 38像素 居中显示 行高为 80像素
header h1{
  color: #fff;
  font-size: .475rem;
  text-align: center;
  line-height: 1rem;
  font-weight: 400;
  text-shadow: 0 0 .3em deeppink;
}

// 时间模块 showTime 定位右侧 right 为 30px 行高为 75px 文字颜色为：rgba(255, 255, 255, 0.7) 而文字大小为 20像素
.showTime{
  position: absolute;
  top: 0;
  right: .375rem;
  line-height: .9375rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: .25rem;
}



 // 需要一个上左右的10px 的内边距 column 列容器，分三列，占比 3：5：3
.mainBox{
  display: flex;
  min-width: 860px;
  max-width: 1920px;
  padding: .125rem .125rem 0;
  margin: 0 auto;
}

.column{
  flex: 3;
  &:nth-child(2){
    flex: 5;
    overflow: hidden;
  }
}


    // 高度为 310px
    // 1像素的 1px solid rgba(25, 186, 139, 0.17) 边框
    // 有line.jpg 背景图片
    // padding为 上为 0 左右 15px 下为 40px
    // 下外边距是 15px
    // 利用panel 盒子 before 和after 制作上面两个角 大小为 10px 线条为 2px solid #02a6b5
    // 新加一个盒子before 和after 制作下侧两个角 宽度高度为 10px
.panel{
  position: relative;
  height: 3.35rem;
  border: 1px solid rgba(25, 186, 139, 0.17);
  background: url('../image/line.png') rgba(255, 255, 255, .03);
  padding: 0 .1875rem .5rem;
  margin-bottom: .1875rem;
  //background-size: 100% 100%;
  &::before{
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-left: 2px solid #02a6b5;
    border-top: 2px solid #02a6b5;
  }
  &::after{
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid #02a6b5;
    border-top: 2px solid #02a6b5;
  }
  
  
// 标题模块 h2 高度为 48px 文字颜色为白色 文字大小为 20px
// 图标内容模块 chart 高度 240px
// 以上可以作为panel公共样式部分
  h2{
    height: .6rem;
    color: #fff;
    line-height: .6rem;
    font-size: .25rem;
    font-weight: 400;
    text-align: center;
  }

  .chart{
    height: 3rem;
    //background-size: 100% 100%;
  }
}
.panel-footer{
  &::before{
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-left: 2px solid #02a6b5;
    border-bottom: 2px solid #02a6b5;
  }
  &::after{
    position: absolute;
    bottom: 0;
    right: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid #02a6b5;
    border-bottom: 2px solid #02a6b5;
  }
}


    // 中间盒子
    // 上面是no 数字模块
    // 下面是map 地图模块

    // 数字模块 no 有个背景颜色 rgba(101, 132, 226, 0.1); 有个15像素的内边距
    // 注意中间列 column 有个 左右 10px 下 15px 的外边距
    // no 模块里面上下划分 上面是数字（no-hd) 下面 是 相关文字说明(no-bd)
    // no-hd 数字模块 有一个边框 1px solid rgba(25, 186, 139, 0.17)
    // no-hd 数字模块 里面分为两个小li 每个小li高度为 80px 文字大小为 70px 颜色为 #ffeb7b 字体是图标字体 electronicFont
    // no-hd 利用 after 和 before制作2个小角， 边框 2px solid #02a6b5 宽度为 30px 高度为 10px
    // 小竖线 给 第一个小li after 就可以 1px宽 背景颜色为 rgba(255, 255, 255, 0.2); 高度 50% top 25% 即可
    // no-bd 里面也有两个小li 高度为 40px 文字颜色为 rgba(255, 255, 255, 0.7) 文字大小为 18px 上内边距为 10px
.no{
  background: rgba(101, 132, 226, .1);
  padding: .1875rem;
  margin: 0 .125rem .1875rem;
  .no-hd{
    position: relative;
    border: 1px solid rgba(25, 186, 139, .17);
    ul{
      display: flex;
      li{
        position: relative;
        flex: 1;
        line-height: 1rem;
        font-size: .875rem;
        color: #ffeb7b;
        text-align: center;
        font-family: 'electronicFont';
        &::before{
          // TODO 第二个li也会有效果
          content: '';
          position: absolute;
          height: 50%;
          top: 25%;
          right: 0;
          width: 1px;
          background: rgba(255, 255, 255, 0.2);
        }
      }
    }
    &::before{
      position: absolute;
      top: 0;
      left: 0;
      content: '';
      border-top: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
      width: 30px;
      height: 10px;
    }
    &::after{
      position: absolute;
      bottom: 0;
      right: 0;
      content: '';
      border-bottom: 2px solid #02a6b5;
      border-right: 2px solid #02a6b5;
      width: 30px;
      height: 10px;
    }
  }
  .no-bd{
    ul{
        display: flex;
      li{
        flex: 1;
        text-align: center;
        height: .5rem;
        line-height: .5rem;
        color: rgba(255, 255, 255, .7);
        font-size: .225rem;
        padding-top: .125rem;
      }
    }

  }
}


    // 地图模块高度为 810px 里面包含4个盒子 chart 放图表模块 球体盒子 旋转1 旋转2
    // 球体图片模块 map1 大小为 518px 要加背景图片 因为要缩放设置100% 定位到最中央 透明度 .3
    // 旋转1 map 2 大小为 643px 要加背景图片 因为要缩放100% 定位到中央 透明度 .6 做旋转动画 利用z-index压住球体
    // 旋转2 map3 大小为 566px 要加背景图片 因为要缩放100% 定位到中央 旋转动画 注意是逆时针

.map{
  position: relative;
  height: 10.125rem;
  .map1{
    height: 6.475rem;
    width: 6.475rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: url('../image/map.png');
    background-size: 100% 100%;
    opacity: .3;
  }
  .map2{
    position: absolute;
    height: 8.0375rem;
    width: 8.0375rem;
    background: url('../image/lbx.png');
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-size: 100% 100%;
    opacity: 0.6;
    animation: rotate1 15s linear infinite;
  }
  .map3{
    position: absolute;
    height: 7.075rem;
    width: 7.075rem;
    background: url('../image/jt.png');
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-size: 100% 100%;
    opacity: 0.6;
    animation: rotate2 10s linear infinite;
  }
  .chart{
    //position: absolute;
    //top: 0;
    //left: 0;
    height: 9.80rem;
    width: 100%;
  }

  @keyframes rotate1 {
    from{
      transform: translate(-50%,-50%) rotate(0deg);
    }
    to{
      transform: translate(-50%,-50%) rotate(360deg);
    }
  }
  @keyframes rotate2 {
    from{
      transform: translate(-50%,-50%) rotate(0deg);
    }
    to{
      transform: translate(-50%,-50%) rotate(-360deg);
    }
  }
}